<template>
  <div>
	<el-row class="tool_style">
		<el-button type="primary" title="新增文章" icon="el-icon-plus" circle @click="showAdd"></el-button>
		<el-button type="danger" title="删除文章" icon="el-icon-delete" circle @click="deleteAll"></el-button>
	</el-row>
    <!--表格内容-->
    <el-table
      ref="form"
      :data="tableData"
      style="width: 100%"
      border
      stripe
      highlight-current-row
      :default-sort="{prop: 'date', order: 'descending'}"
	  @selection-change="handleSelection"
	  >
      <el-table-column
        type="selection"
        width="45"
        align="center">
      </el-table-column>
      <el-table-column
        type="index"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        property="proNo"
        label="项目编号"
        width="180">
      </el-table-column>
      <el-table-column
        property="proName"
        label="项目名称"
        width="120">
      </el-table-column>
      <el-table-column
        type="data"
        property="proDesc"
        label="项目描述"
        width="120">
      </el-table-column>
      <el-table-column
        type="data"
        property="startTime"
        label="项目开始时间"
        width="120">
      </el-table-column>
      <el-table-column
        type="data"
        property="endTime"
        label="项目结束时间"
        width="120">
      </el-table-column>
      <el-table-column
        type="data"
        property="status"
        label="项目状态"
        width="120">
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.status == 0" class="item" effect="dark"
                      content="申请中" placement="top">
            <span>申请中</span>
          </el-tooltip>
          <el-tooltip v-else-if="scope.row.status == 1" class="item" effect="dark"
                      content="申请通过" placement="top">
            <span>申请通过</span>
          </el-tooltip>
          <el-tooltip v-if="scope.row.status == 2" class="item" effect="dark"
                      content="驳回申请" placement="top">
            <span>驳回申请</span>
          </el-tooltip>
          <el-tooltip v-else-if="scope.row.status == 3" class="item" effect="dark"
                      content="项目中检" placement="top">
            <span>项目中检</span>
          </el-tooltip>
          <el-tooltip v-else-if="scope.row.status == 4" class="item" effect="dark"
                      content="项目结项" placement="top">
            <span>项目结项</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        type="data"
        property="ownerName"
        label="项目持有者"
        width="120">
      </el-table-column>
      <el-table-column
        type="data"
        property="statement"
        label="结项说明"
        width="120">
      </el-table-column>
      <el-table-column
        type="data"
        property="orgName"
        label="组织机构"
        width="120">
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="180">
        <template slot-scope="scope">
          <el-button circle icon="el-icon-edit-outline" type="primary" title="编辑" size="small"
            @click="showEdit(scope.row.id)"></el-button>
          <el-button circle icon="el-icon-delete" type="danger" title="删除" size="small"
            @click="rowDel(scope.$index, scope.row, $event);"></el-button>
        </template>
      </el-table-column>
    </el-table>
	<!--分页-->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.pageNum"
        :page-sizes="[10, 15, 20]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="query.total">
      </el-pagination>
    </div>
	<right-panel :controlShow = "controlShow" @search="handleQuery" @reset="resetQuery('input')">
		<el-form size="mini" ref="input" :model="input" :rules="rules" label-width="80px">
			<el-form-item label="项目名称" prop="proName">
				<el-input v-model="input.proName" maxlength="20"></el-input>
			</el-form-item>

      <el-form-item label="活动区域">
        <el-select v-model="input.status" placeholder="请选择项目状态">
          <el-option label="申请中" :value="0"></el-option>
          <el-option label="通过申请" :value="1"></el-option>
          <el-option label="驳回申请" :value="0"></el-option>
          <el-option label="项目中检" :value="1"></el-option>
          <el-option label="项目结项" :value="1"></el-option>
        </el-select>
      </el-form-item>
		</el-form>
	</right-panel>
	<el-dialog
	  :visible.sync="show"
      :title="!editId ? '新增' : '编辑'"
      width="860px"
      @close="dialogClose">
		<noticeEdit v-if="show" :editId="editId" @close="dialogClose" />
	</el-dialog>

  </div>
</template>

<script>
  import RightPanel from '@/components/RightPanel'
  import noticeEdit from './components/researchEdit'
  import {select,del} from '@/api/research'
  export default {
	name: "noticeInfo",
	components: {
		RightPanel,
    noticeEdit
	},
    data() {
      return {
        selectedIds:[],
        controlShow:false,
        input: {
          title: null,
          type: null

        },
        query: {
          pageNum: 1,
          pageSize: 10,
          total:0,
        },
        editId:null,
        show: false,
        rules: {
            title: [
              {min: 0, max: 100, message: '长度在 0 到 100 个字之间。', trigger: 'blur'}
            ]
          },
            tableData: [],
          }
        },
    mounted(){
	    this.getData();
    },
    methods: {
      handleSelection(val) {
        this.selectedIds = [];
        for (var i = 0; i < val.length; i++) {
          this.selectedIds.push(val[i].id);
        }
      },
      deleteAll(){
        if (this.selectedIds.length == 0){
          this.$message.error("请选择至少一项")
          return;
        }
        this.delete(this.selectedIds);
      },
      delete(data) {
        let _this =this;
        this.$confirm('确定要删除选中数据吗？', '删除', {
          comfirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          let arr = new Array();
          for (let i = 0;i<data.length;i++) {
            // arr.push({"id":data[i]})
            arr.push(data[i])
          }
          del(arr).then(function (data) {
            if (data.code == 200){
              _this.$message.success('删除成功');
              _this.getData()
            } else{
              _this.$message.error(data.message);
            }
          })
          return false;
        });
      },
      dialogClose() {
        // 清空编辑表单
        this.show = false;
        this.editId = null;
        // 刷新数据
        this.getData();
      },
      showAdd(){
        this.show = true;
      },
      showEdit(id) {
        this.editId = id;
        this.show = true;
      },
      rowDel(index, row, event) {
        this.delete([row.id]);
      },
      handleQuery(show) {
        this.query.pageNum = 1;
        this.query.userName = this.input.userName;
        this.getData()
      },
      getData() {
        let _this = this;
        this.$refs.input.validate((valid) => {
          if (valid) {
            select(_this.input,_this.query).then(function (data) {
              if (data.code == 200){
                _this.tableData = data.data.list;
                _this.query.total = data.data.total;
              } else{
                _this.$message.error(data.message);
              }
            })
          } else {
            _this.controlShow=true;
            return false;
          }
        });
      },
      resetQuery(formName) {
        this.input.title = "";
        this.$refs[formName].resetFields();
      },
      handleSizeChange(pageSize) {
        this.query.pageSize = pageSize;
        this.getData()
      },
      handleCurrentChange(pageNum) {
        this.query.pageNum = pageNum;
        this.getData()
      },
    }
  }
</script>

<style scoped lang="less">
.el-form {
  padding: 0 10px;
}
.el-date-editor {
  width: 100% !important;
}
.el-pagination{
	margin-top: 10px;
	float: left;
}
.tool_style{
	padding: 10px 0;
}
</style>
